<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let colors =[]
			function init(){
				let xhr =new XMLHttpRequest();
				xhr.open("GET","colors.xml",true);
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4 && xhr.status==200){
						var data = xhr.responseXML;
						colors = data.querySelectorAll("color");
						let select = document.querySelector("select")
						for (var i = 0; i < colors.length; i++) {
							select.options[i]=new Option(colors[i].querySelector("name").innerHTML)
						}
					
					}
				}
			}
		</script>
	</head>
	<body onload="init()">
		请选择背景颜色<select></select>
		<script type="text/javascript">
			let select = document.querySelector("select")
			select.addEventListener("change",function(){
				let index = select.selectedIndex//下拉列表中被选中选项的索引
				let c=colors[index].querySelector("value").innerHTML
				document.body.setAttribute("style","background-color: "+c+";")
			})
		</script>
	</body>
</html>
